<template>
  <div class="system-log">
    <div class="action-bar">
      <div class="search-area">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索用户名、操作类型或IP地址"
          style="width: 300px;"
          clearable
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        
        <el-select v-model="logLevel" placeholder="日志级别" style="width: 120px; margin-left: 12px;">
          <el-option label="全部" value="" />
          <el-option label="信息" value="info" />
          <el-option label="警告" value="warning" />
          <el-option label="错误" value="error" />
        </el-select>
        
        <el-date-picker
          v-model="dateRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          style="width: 320px; margin-left: 12px;"
        />
      </div>
      
      <div class="action-buttons">
        <el-button @click="exportLogs">
          <el-icon><Download /></el-icon>
          导出日志
        </el-button>
        <el-button @click="clearLogs" type="danger">
          <el-icon><Delete /></el-icon>
          清空日志
        </el-button>
      </div>
    </div>
    
    <el-table :data="filteredLogs" style="width: 100%" v-loading="loading">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="timestamp" label="时间" width="160" />
      <el-table-column prop="level" label="级别" width="80">
        <template #default="{ row }">
          <el-tag :type="getLevelType(row.level)" size="small">
            {{ getLevelLabel(row.level) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户" width="120" />
      <el-table-column prop="action" label="操作" min-width="200" />
      <el-table-column prop="module" label="模块" width="120" />
      <el-table-column prop="ip" label="IP地址" width="140" />
      <el-table-column prop="userAgent" label="用户代理" width="200" show-overflow-tooltip />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="row.status === 'success' ? 'success' : 'danger'" size="small">
            {{ row.status === 'success' ? '成功' : '失败' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" fixed="right">
        <template #default="{ row }">
          <el-button type="text" size="small" @click="viewLogDetail(row)">
            <el-icon><View /></el-icon>
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="pagination-wrapper">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  name: 'SystemLog',
  setup() {
    const loading = ref(false)
    const searchKeyword = ref('')
    const logLevel = ref('')
    const dateRange = ref([])
    const currentPage = ref(1)
    const pageSize = ref(20)
    const total = ref(0)
    
    const logs = ref([
      {
        id: 1,
        timestamp: '2024-01-15 14:30:25',
        level: 'info',
        username: 'admin',
        action: '用户登录',
        module: '用户管理',
        ip: '192.168.1.100',
        userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
        status: 'success'
      },
      {
        id: 2,
        timestamp: '2024-01-15 14:25:10',
        level: 'info',
        username: 'manager',
        action: '添加小麦检测数据',
        module: '数据管理',
        ip: '192.168.1.101',
        userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
        status: 'success'
      },
      {
        id: 3,
        timestamp: '2024-01-15 14:20:45',
        level: 'warning',
        username: 'user001',
        action: '尝试访问未授权页面',
        module: '权限管理',
        ip: '192.168.1.102',
        userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
        status: 'failed'
      },
      {
        id: 4,
        timestamp: '2024-01-15 14:15:30',
        level: 'error',
        username: 'system',
        action: '数据库连接失败',
        module: '系统管理',
        ip: '127.0.0.1',
        userAgent: 'System/1.0',
        status: 'failed'
      },
      {
        id: 5,
        timestamp: '2024-01-15 14:10:15',
        level: 'info',
        username: 'admin',
        action: '生成检测报告',
        module: '报告管理',
        ip: '192.168.1.100',
        userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
        status: 'success'
      }
    ])
    
    const filteredLogs = computed(() => {
      let filtered = logs.value
      
      if (searchKeyword.value) {
        filtered = filtered.filter(item => 
          item.username.includes(searchKeyword.value) ||
          item.action.includes(searchKeyword.value) ||
          item.ip.includes(searchKeyword.value)
        )
      }
      
      if (logLevel.value) {
        filtered = filtered.filter(item => item.level === logLevel.value)
      }
      
      return filtered
    })
    
    const getLevelType = (level) => {
      const types = {
        info: 'info',
        warning: 'warning',
        error: 'danger'
      }
      return types[level] || 'info'
    }
    
    const getLevelLabel = (level) => {
      const labels = {
        info: '信息',
        warning: '警告',
        error: '错误'
      }
      return labels[level] || '未知'
    }
    
    const exportLogs = () => {
      ElMessage.info('导出日志功能开发中...')
    }
    
    const clearLogs = () => {
      ElMessageBox.confirm(
        '确定要清空所有日志吗？此操作不可恢复！',
        '确认清空',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        logs.value = []
        ElMessage.success('日志已清空')
      })
    }
    
    const viewLogDetail = (row) => {
      ElMessage.info('查看日志详情功能开发中...')
    }
    
    return {
      loading,
      searchKeyword,
      logLevel,
      dateRange,
      currentPage,
      pageSize,
      total,
      filteredLogs,
      getLevelType,
      getLevelLabel,
      exportLogs,
      clearLogs,
      viewLogDetail
    }
  }
}
</script>

<style scoped>
.system-log {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.search-area {
  display: flex;
  align-items: center;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
